import { Link, Navigate } from 'react-router-dom';
import logoBg from '@/assets/logo-bg.png';
import LoginPanel from '@/components/LoginPanel';
import { useAuthStore } from '@/stores/auth';
import { Select } from 'antd';
import { changeLanguage, LangKey } from '@/i18n';
import { t } from 'i18next';
import logo from '@/assets/icon/logo.png';
import dy from '@/assets/icon/dy.png';
import twitter from '@/assets/icon/twitter.png';
import ins from '@/assets/icon/ins.png';

function Login() {
  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);

  if (isAuthenticated()) {
    return <Navigate to="/" replace={true} />;
  }

  return (
    <div className='bg-black md:bg-[#000000]'>
      <div className='fixed top-0 left-0 z-30 flex items-center justify-between w-full h-[80px] px-6'>
        <img src={logo} alt=''  className="h-[24px] w-[120px] cursor-pointer" />
        <div className=' items-center justify-end hidden md:flex'>
          <div className='mr-4 flex items-center justify-center gap-4'>
            <div><Link to={'https://www.tiktok.com/'}><img src={dy} className='h-[38px] w-[38px] cursor-pointer' alt="" /></Link></div>
            <div><Link to={'https://x.com/'}><img src={twitter} className='h-[38px] w-[38px] cursor-pointer' alt="" /></Link></div>
            <div><Link to={'https://www.instagram.com/'}><img src={ins} className='h-[38px] w-[38px] cursor-pointer' alt="" /></Link></div>
          </div>
          <div className="custom-select">
          <Select
            defaultValue={LangKey.EN}
            style={{ width: 112 }}
            popupClassName='bg-black custom-select-content'
            onChange={(v: any) => changeLanguage(v)}
            options={[
              { value: LangKey.EN, label: t('en') },
              { value: LangKey.ZH_HANS, label: t('zhHans') },
              { value: LangKey.ZH_HANT, label: t('zhHant') },
            ]}
          />
        </div>
        </div>
      </div>
      <div className="relative z-[1] flex h-screen w-full justify-center md:items-center">
        <div className="relative z-[1] w-full md:w-auto">
          <div className="-left-[100px] -top-[208px] hidden rounded-full md:absolute md:block md:h-[621px] md:w-[648px]">
            <img src={logoBg} alt="" />
          </div>
          <div className="xs:block min-h-[30vw] sm:block md:hidden"></div>
          <LoginPanel></LoginPanel>
        </div>
      </div>
    </div>
  );
}

export default Login;
